<template>
  <div class="message-container" v-if="useChatListStore().chatList.length > 0">
    <div class="message-item animate__animated animate__slideInDown" v-for="item in useChatListStore().chatList"
      :key="item.id">
      <!-- 头像 -->
      <div class="avatar">
        <img class="user-image"
          :src="useUserStore().user.id === item.fromUserId ? item.toUserAvatar : item.fromUserAvatar"
          style="border: 1px solid rgba(0, 0, 0, 0.08)" />
      </div>
      <!-- 昵称和消息显示 -->
      <div class="name-message" @click="openDrawer(item)">
        <div class="nickName">{{ useUserStore().user.id === item.fromUserId ? item.toUserNick : item.fromUserNick }}
        </div>
        <div class="message">
          {{ item.chatMessage.content }}
          <el-badge :value="item.noReadCount" :max="99" :show-zero="false" class="item" :offset="[0, 10]"
            color="#FF3C55"></el-badge>
        </div>
        <span>{{ formatDateTime(item.chatMessage.sendTime) }}</span>
      </div>
      <!-- 关联商品图片 -->
      <div class="product-img">
        <img class="product-image" :src="item.productImage" style="border: 1px solid rgba(0, 0, 0, 0.08)" />
      </div>
      <!-- 删除消息 -->
      <el-popconfirm confirm-button-text="删除" cancel-button-text="取消" icon-color="#fe3b55" title="确认删除双方共同的聊天记录?"
        @confirm="useChatListStore().deleteChatList(item.id)">
        <template #reference>
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-shanchu1"></use>
          </svg>
        </template>
      </el-popconfirm>
    </div>
    <!-- 聊天抽屉 -->
    <el-drawer class="custom-drawer" v-model="showDrawer" :with-header="false" :lock-scroll="false" :size="'500px'">
      <ChatMessage v-if="showDrawer" />
    </el-drawer>
  </div>
  <!-- 空数据 -->
  <DataEmpty v-else />
</template>

<script setup lang='ts'>
import DataEmpty from '@/components/empty/DataEmpty.vue'
import ChatMessage from './ChatMessage.vue'
import { ref } from 'vue'
import { formatDateTime } from '@/utils/formatDate'
import type { ChatListType } from '@/types/chatlist'
import { useChatListStore } from '@/stores/modules/chatList'
import { useChatMessageStore, useProductDetailStore, useUserStore } from '@/stores'
const showDrawer = ref(false)

// 打开抽屉
function openDrawer(item: ChatListType) {
  // 设置聊天窗口为打开状态
  // useChatMessageStore().isChatMessageOpened = item.id
  // 获取关联商品的详情
  useProductDetailStore().getProductDetail(item.productId)
  // 获取聊天记录
  // 1.如果聊天记录的发起人是自己，则获取对方的聊天记录
  if (item.fromUserId === useUserStore().user.id) {
    useChatMessageStore().getChatDetail(item.productId, item.toUserId)
  } else {
    // 2.如果聊天记录的发起人是对方，则获取自己的聊天记录
    useChatMessageStore().getChatDetail(item.productId, item.fromUserId)
  }
  // 打开抽屉
  showDrawer.value = true
}

</script>

<style lang='less' scoped>
.message-container {
  width: 100%;


  .message-item {
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;


    .avatar {
      flex: 1;
      cursor: pointer;
      height: 70px;
      display: flex;
      justify-content: center;

      .user-image {
        border-radius: 50%;
        height: 70px;
        width: 70px;
        object-fit: cover;
      }
    }

    .name-message {
      flex: 4;
      cursor: pointer;
      padding-top: 2px;
      height: 70px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);

      .nickName {
        font-size: 18px;
        font-weight: 600;
      }

      .message {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        font-weight: 400;
        color: var(--dark-font-color);
      }

      span {
        font-weight: 400;
        font-size: 12px;
        color: var(--dark-font-color);
        white-space: pre-wrap;
        overflow-wrap: break-word;
        margin-bottom: 3px;
      }


    }

    .product-img {
      cursor: pointer;
      flex: 1;
      height: 70px;
      display: flex;
      justify-content: center;

      .product-image {
        border-radius: 10%;
        height: 70px;
        width: 70px;
        object-fit: cover;
      }
    }

    .icon {
      width: 1.5em;
      height: 1.5em;
      fill: currentColor;
      overflow: hidden;
      transition: all 0.2s;

      &:hover {
        cursor: pointer;
        transform: scale(1.1);
      }
    }
  }
}
</style>
